<template>
  <div class="tw-main">
    <el-row class="tw-grid">
      <el-col :lg="12" :md="24" class="tw-grid__left">
        <tw-card
          label="产品覆盖地图"
        >
          <tw-echarts
            id="echarts_productionMap"
            ref="echarts_productionMap"
            :additionalOptions="additionalOptions['echarts_productionMap']"
            height="45vh"
          ></tw-echarts>
        </tw-card>
      </el-col>
      <el-col :lg="12" :md="24" class="tw-grid__right">
        <tw-card
          label="教育事业基本情况图"
        >
          <tw-echarts
            id="echarts_educationBasicSituation"
            ref="echarts_educationBasicSituation"
            :additionalOptions="additionalOptions['echarts_educationBasicSituation']"
            height="45vh"
          ></tw-echarts>
        </tw-card>
      </el-col>
    </el-row>
    <el-row class="tw-grid">
      <el-col :lg="12" :md="24" class="tw-grid__left">
        <el-row>
          <el-col :span="12" class="tw-grid__inside__left">1</el-col>
          <el-col :span="12" class="tw-grid__inside__right">2</el-col>
        </el-row>
      </el-col>
      <el-col :lg="12" :md="24" class="tw-grid__right">
        <el-row class="tw-grid__inside">
          <el-col :span="12" class="tw-grid__inside__left">
            <el-button type="success" @click="check">成功按钮</el-button>
          </el-col>
          <el-col :span="12" class="tw-grid__inside__right">
            <tw-card
              :tabs="tabs"
              :activeTab="activeTab"
              @changeTab="handleChangeCardTab"
            >
              <div class="tw-tab-panes" style="height: 20vh">
                <div class="tw-tab-pane" name="tab-first" v-show="activeTab === 'tab-first'">
                  tab-first
                </div>
                <div class="tw-tab-pane" name="tab-second" v-show="activeTab === 'tab-second'">
                  tab-second
                </div>
              </div>
            </tw-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script scoped>
import TwCard from '@/components/TwCard.vue'
import TwEcharts from '@/components/TwEcharts.vue'

export default{
  props: [],
  created () {
    // echarts_productionMap 产品覆盖地图
    // this.$axios.get('/static/weishidataview/jsondata/echarts_productionMap.json').then(response => {
    //   // this.$refs['echarts_newSchool'].buildChart(this.additionalOptions.additionalOptions1)
    //   this.additionalOptions.echarts_productionMap = response.data
    // }, response => {
    //   console.log('error')
    // })
    // echarts_educationBasicSituation 教育事业基本情况图
    // this.$axios.get('/static/weishidataview/jsondata/echarts_educationBasicSituation.json').then(response => {
    //   // this.$refs['echarts_newSchool'].buildChart(this.additionalOptions.additionalOptions1)
    //   this.additionalOptions.echarts_educationBasicSituation = response.data
    // }, response => {
    //   console.log('error')
    // })
  },
  mounted () {
    // 绑定echarts的resize方法
    window.onresize = () => {
      this.$refs['echarts_productionMap'].resizeChart()
      this.$refs['echarts_educationBasicSituation'].resizeChart()
    }
  },
  data: function () {
    return {
      additionalOptions: {
        echarts_productionMap: {},
        echarts_educationBasicSituation: {}
      },
      // 教师行为分析tab
      tabs: [{
        id: 'tab-first',
        value: '教师行为分析'
      }, {
        id: 'tab-second',
        value: '学生行为分析'
      }],
      activeTab: 'tab-first'
    }
  },
  components: {
    TwCard,
    TwEcharts
  },
  methods: {
    handleChangeCardTab: function (payload) {
      // 切换tab
      this.activeTab = payload
    },
    check: () => {
      console.log('check')
      let temp = document.getElementsByTagName('body')[0]
      console.log(temp.style)
      temp.style.overflowY = 'auto'
      let windowHeight = window.screen.height
      window.scrollTo(0, windowHeight)
      temp.style.overflowY = 'hidden'
    }
  }
}
</script>

<style scoped></style>
